iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
自我挑戰組

50後阿嬤教你寫程式!系列 第 27

Day 27 阿嬤帶你探索 CSS!(4)

  • 分享至 

  • xImage
  •  

Day 27 阿嬤帶你探索 CSS!(4)

給你們受苦

CSS 專業術語

有看過我前幾章友友們,應該知道我有些文章非常的...額...滑稽(應該可以這樣講啦)千萬不要以為
我是隨便寫寫的!我是抱著很注重的心態來給你們講解的!(應該吧)但是即使我在更滑稽,也避不
掉 CSS 專用術語的魔掌,因為呢,我沒了這些專用術語的話,我會很難講解,所以要上的還是要上
好吧。接下來我就會帶著大家參觀「CSS 博物館」(XDD

屬性

heightcolor 應該是最簡單也最常用的屬性。當我們跟人們聊天時,我們都會說人類們的話嘛,那你有沒有想過,如果人們用電腦程式語言溝通的話,那會變得很搞笑XD!例如:「我想吃飯」
後面還要補兩句:「height: 99px」、「color: transparent」或者更多。是不是很好笑XD?
在 CSS 的世界中,heightcolor 就是它的屬性。有點像人們的姓名。

值,大多數與數字有著很大的關係,例如:我們剛提到的 99px 就是其中的一種值,在 CSS 的世界
中,值的分類就分很多種嘍,下面我會列出來常用的值:

整數值:例:z-index: 666中的666,屬於 <integer>,同時也屬於<number>。

數值:例:line-height: 14574中的14574,屬於<number>

百分比值:例:padding: 55%中的55%,屬於<percent>

長度值:例:999px

顏色值:例:#847

當然還有更多的值,例:字串值、位置值等,這裡就不一一列出來了,有興趣可以自己去查~

長度的單位

在 CSS 中,有時間單位,如:s、ms,有角度單位,如:deg、rad等,有長度單位,如:px、em
等。你比較要知道的是,50 % 後面的 % 不是長度單位喔~

有人可能會這樣想「我認為%就是一個單位,頁面一樣長那樣,要你管?」問得很有理,但大家如果
沒有看一些原始文檔,那就沒必要那麼...ㄜ...計較那點小事,自己看得懂就好。
但是如果有在看一些 CSS 的技術文檔,只要一點看不懂,基本上,你都不用看了。尤其都是英文的
那種,所以大家還是要留意一下哈。

小總結

我們今天把一些基本的術語都傳授給你們了,下一篇會開始真正的實作(XD我好會拖
請大家有一點耐心,畢竟國中生嘛...在學業這方面比較有壓力一點,請各位大大見諒!


上一篇
Day 26 阿嬤帶你探索 CSS!(3)
下一篇
Day 28 阿嬤帶你探索 CSS!(5)
系列文
50後阿嬤教你寫程式!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言